<template>
  <a-card :bordered='false'>
    <div class='card-title'>{{ $route.meta.title }}</div>
    <div class='table-operator'>
      关键词查询：
      <a-input-search
        style='max-width: 300px; min-width: 150px;'
        v-model='queryParam.search'
        placeholder='请输入服务名称'
        @search='onSearch'
      />
      客户：
      <SelectCustomer
        @change='handleRefresh(true)'
        width='260px'
        v-model='queryParam.customer_id'
        placeholder='请选择客户'
      />
      录入时间：
      <a-range-picker format='YYYY-MM-DD' v-model='queryParam.create_time' @change='handleRefresh(true)' />
    </div>
    <s-table
      ref='table'
      rowKey='cs_id'
      :loading='isLoading'
      :columns='columns'
      :data='loadData'
      :pageSize='15'
    >
      <div slot='time' slot-scope='text, item'>
        <template v-if='item.month==0 || !text'>-</template>
        <template v-else>{{ text }}</template>
      </div>
      <div slot='month' slot-scope='text, item'>
        {{ text ? text + '个月' : '一次性服务' }}
      </div>
      <div slot='customer' slot-scope='text, item'>
        <div>客户姓名：{{ text.full_name || '-' }}</div>
        <div>身份证号：{{ text.idnumber || '-' }}</div>
        <div>公司名称：{{ text.corporate_name || '-' }}</div>
        <div>授权签约人：{{ text.signatory || '-' }}</div>
        <div>手机号码：{{ text.mobile || '-' }}</div>
      </div>
      <div slot='store_user' slot-scope='text, item'>
        <div v-if='item.package'>
          <div>销售姓名：{{ item.package.store_user ? item.package.store_user.real_name : '-' }}
            <a v-action:xgxs @click='editUser(item,0)'>编辑</a>
          </div>
          <div>会计姓名：{{ item.package.kj_user ? item.package.kj_user.real_name : '-' }}
            <a v-action:xgkj @click='editUser(item,1)'>编辑</a>
          </div>
          <div>外勤姓名：{{ item.package.wq_user ? item.package.wq_user.real_name : '-' }}
            <a v-action:xgwq @click='editUser(item,2)'>编辑</a>
          </div>
        </div>
      </div>

      <div slot='price' slot-scope='text, item'>
        <div>标准价格：{{ item.standard_price || '-' }}</div>
        <div>成交价格：{{ item.deal_price || '-' }}</div>
        <div>已收款金额：{{ item.collection_price || '-' }}</div>
        <div>尾款金额：{{ item.balance_price || '-' }}</div>
      </div>
      <div class='actions' slot='action' slot-scope='text, item'>
        <a v-action:service_list @click='handleServiceList(item)'>服务列表</a>
        <a v-action:edit @click='handleEdit(item)'>编辑</a>
        <a v-action:delete @click='handleDelete(item)'>删除</a>
      </div>
      <template slot='footer' slot-scope='currentPageData'>
        <a-row>
          <a-col :span='2'>
            金额统计
          </a-col>
          <a-col :span='22' style='text-align: right'>
            <span style='margin-right: 20px'>标准金额：<span style='color:red;'>￥</span>{{ standard_price }}</span>
            <span style='margin-right: 20px'>成交价格：<span style='color:red;'>￥</span>{{ collection_price }}</span>
            <span style='margin-right: 20px'>已收款金额：<span style='color:red;'>￥</span>{{ deal_price }}</span>
            <span style='margin-right: 20px'>尾款金额：<span style='color:red;'>￥</span>{{ balance_price }}</span>
          </a-col>
        </a-row>
      </template>
    </s-table>

    <a-modal
      title='编辑分配信息'
      :visible='editUserVisible'
      :destroyOnClose='true'
      @cancel='editUserVisible=false'
      @ok='subEditUser'
    >
      选择：
      <SelectSale
        v-model='currUserId'
        :position='position'
      />
    </a-modal>
  </a-card>
</template>

<script>
import * as Api from '@/api/customer/service'
import * as packageApi from '@/api/customer/package'

import { SelectCustomer, SelectSale, STable } from '@/components'

export default {
  props: ['monthType'],
  name: 'Index',
  components: {
    SelectSale,
    SelectCustomer,
    STable
  },
  data() {
    return {
      // 查询参数
      queryParam: {
        month_type: this.month_type,
        customer_type: 1,
        package_status: 2,
        create_time: []
      },
      // 正在加载
      isLoading: false,
      // 表头
      columns: [
        {
          title: 'ID',
          dataIndex: 'cs_id'
        },
        {
          title: '服务名称',
          dataIndex: 'service_name'
        },
        {
          title: '服务期限',
          dataIndex: 'month',
          scopedSlots: { customRender: 'month' }
        },
        {
          title: '分配信息',
          dataIndex: 'store_user',
          scopedSlots: { customRender: 'store_user' }
        },
        {
          width: 200,
          title: '客户信息',
          dataIndex: 'customer',
          scopedSlots: { customRender: 'customer' }
        },
        {
          title: '金额信息',
          dataIndex: 'price',
          scopedSlots: { customRender: 'price' }
        },
        {
          title: '开始日期',
          dataIndex: 'start_time_text',
          scopedSlots: { customRender: 'time' }
        },
        {
          title: '结束日期',
          dataIndex: 'end_time_text',
          scopedSlots: { customRender: 'time' }
        },
        {
          title: '录入时间',
          dataIndex: 'create_time'
        }
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   width: '180px',
        //   scopedSlots: { customRender: 'action' }
        // }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: param => {
        return Api.list({ ...param, ...this.queryParam })
          .then(response => {
            this.standard_price = response.data.standard_price
            this.collection_price = response.data.collection_price
            this.deal_price = response.data.deal_price
            this.balance_price = response.data.balance_price
            return response.data.list
          })
      },
      types: [
        { text: '收款金额*', symbols: '%' },
        { text: '固定金额', symbols: '元' },
        { text: '每月提成', symbols: '元' }
      ],
      types2: [
        { text: '(成交价格-成本价格)*', symbols: '%' },
        { text: '固定金额', symbols: '元' },
        { text: '每月提成', symbols: '元' }
      ],
      types3: [
        { text: '收款金额*', symbols: '%' },
        { text: '固定金额', symbols: '元' },
        { text: '选择成本费用', symbols: '元' }
      ],

      editUserVisible: false,
      position: -1,
      currEditUserItem: {},
      currUserId: '',

      standard_price: 0,
      collection_price: 0,
      deal_price: 0,
      balance_price: 0
    }
  },
  created() {
  },
  methods: {
    // 新增记录
    handleAdd() {
      this.$refs.AddForm.add()
    },

    // 编辑记录
    handleEdit(item) {
      this.$refs.AddForm.edit(item)
    },
    editUser(item, position) {
      this.currEditUserItem = item
      this.position = position
      this.editUserVisible = true
      this.$nextTick(() => {
        if (position == 0) {
          this.currUserId = item.package.store_user_id
        } else if (position == 1) {
          this.currUserId = item.package.kj_user_id
        } else {
          this.currUserId = item.package.wq_user_id
        }
      })
    },
    subEditUser() {
      var form = {}
      if (this.position == 0) {
        form.store_user_id = this.currUserId
      } else if (this.position == 1) {
        form.kj_user_id = this.currUserId
      } else {
        form.wq_user_id = this.currUserId
      }

      packageApi.edit({ apiId: this.currEditUserItem['package_id'], form })
        .then(result => {
          this.$message.success(result.message, 1.5)
          this.handleRefresh()
          this.editUserVisible = false
        })
    },
    // 查看服务列表
    handleServiceList(item) {
      this.$refs.PackageModel.queryParam.customer_id = item.customer_id
      this.$refs.PackageModel.open(item)
    },

    // 删除记录
    handleDelete(item) {
      const app = this
      const modal = this.$confirm({
        title: '您确定要删除该记录吗?',
        content: '删除后不可恢复',
        onOk() {
          return Api.deleted({ apiId: item['service_id'] })
            .then(result => {
              app.$message.success(result.message, 1.5)
              app.handleRefresh()
            })
            .finally(result => modal.destroy())
        }
      })
    },

    /**
     * 刷新列表
     * @param Boolean bool 强制刷新到第一页
     */
    handleRefresh(bool = false) {
      this.$refs.table.refresh(bool)
    },

    // 检索查询
    onSearch() {
      this.handleRefresh(true)
    }

  }
}
</script>
